<template>
  <div class="user__wrapper">
    <!-- 查询 -->
    <div class="user__top">
      <el-form :inline="true" :model="queryForm" ref="queryForm">
        <el-form-item label="菜单名称" prop="menuName">
          <el-input
            placeholder="菜单名称"
            v-model="queryForm.menuName"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单状态" prop="menuState">
          <el-select v-model="queryForm.menuState">
            <el-option :value="1" label="正常"></el-option>
            <el-option :value="2" label="停用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="initMenuList">查询</el-button>
          <el-button type="primary" @click="resetForm('queryForm')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- /查询 -->
    <!-- 表格 -->
    <div class="user__bottom">
      <div class="active">
        <el-button type="primary" v-has:add="'menu-add'" @click="handeAdd()"
          >新增</el-button
        >
      </div>
      <el-table
        :data="menuList"
        row-key="_id"
        :tree-props="{ children: 'children' }"
        style="width: 100%"
      >
        <el-table-column
          v-for="item in menuCloum"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
          :width="item.width"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" width="250px">
          <template #default="scope">
            <el-button
              size="mini"
              type="success"
              @click="handeAdd(2, scope.row)"
              v-has:add="'menu-add'"
              >新增</el-button
            >
            <el-button
              size="mini"
              @click="handeEdit(scope.row)"
              v-has:edit="'menu-edit'"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row._id)"
              v-has:del="'menu-del'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->
    <!-- 新增表单 -->
    <el-dialog title="新增" v-model="showDialog" width="500px">
      <el-form ref="menuForm" :model="menuForm" :rules="rules">
        <el-form-item label="父级菜单" prop="parentId">
          <el-cascader
            :options="menuList"
            :props="{ checkStrictly: true, value: '_id', label: 'menuName' }"
            clearable
            v-model="menuForm.parentId"
          />
          <span>不选则默认创建一级菜单</span>
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="menuForm.menuType">
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input
            type="text"
            v-model="menuForm.menuName"
            :clearable="true"
            placeholder="请输入菜单名称"
          />
        </el-form-item>
        <el-form-item
          label="菜单图标"
          prop="icon"
          v-if="menuForm.menuType == 1"
        >
          <el-input
            type="text"
            v-model="menuForm.icon"
            :clearable="true"
            placeholder="请输入菜单图标"
          />
        </el-form-item>
        <el-form-item label="权限标识" prop="menuCode">
          <el-input
            type="text"
            v-model="menuForm.menuCode"
            :clearable="true"
            placeholder="请输入权限标识"
          />
        </el-form-item>
        <el-form-item
          label="路由地址"
          prop="path"
          v-if="menuForm.menuType == 1"
        >
          <el-input
            type="text"
            v-model="menuForm.path"
            :clearable="true"
            placeholder="请输入路由地址"
          />
        </el-form-item>
        <el-form-item
          label="组件路径"
          prop="component"
          v-if="menuForm.menuType == 1"
        >
          <el-input
            type="text"
            v-model="menuForm.component"
            :clearable="true"
            placeholder="请输入组件路径"
          />
        </el-form-item>
        <el-form-item label="菜单状态" prop="menuState">
          <el-radio-group v-model="menuForm.menuState">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handeClose('menuForm')">取 消</el-button>
          <el-button type="primary" @click="handeSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- /新增用户结束 -->
  </div>
</template>

<script>
import util from '@/utils/utils.js'
export default {
  name: 'Menu',
  data () {
    return {
      showDialog: false, // 控制弹出表单
      queryForm: {
        menuState: 1
      }, // 查询表单
      menuForm: {
        menuType: 1,
        menuState: 1,
        parentId: [null]
      }, //菜单表单
      menuList: [],  // 菜单列表
      menuCloum: [
        {
          prop: 'menuName',
          label: '菜单名称',
          width: '150px'
        },
        {
          prop: 'icon',
          label: '图标',
        },
        {
          prop: 'menuType',
          label: '菜单类型',
          formatter (row, cloum, value) {
            return {
              1: '菜单',
              2: '按钮'
            }[value]
          }
        },
        {
          prop: 'menuCode',
          label: '权限标识',
        },
        {
          prop: 'path',
          label: '路由地址',
        },
        {
          prop: 'component',
          label: '组件地址',
        },
        {
          prop: 'menuState',
          label: '菜单状态',
          formatter (row, cloum, value) {
            return {
              1: "启用",
              2: "停用"
            }[value]
          }
        },
        {
          prop: 'createTime',
          label: '创建时间',
          formatter (row, cloum, value) {
            return util.formateDate(new Date(value))
          }
        },
      ],
      rules: {
        menuName: [
          { required: true, message: '菜单名称不得为空', trigger: 'blur' },
          { min: 2, message: '最小两位', trigger: 'blur' }
        ],
        path: { required: true, message: "路由地址不得为空", trigger: "blur" }
      },  // 表单验证
      action: '',  // 表单提交的类型
    }
  },
  methods: {
    // 表单重置
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    // 初始化菜单数据
    async initMenuList () {
      try {
        const list = await this.$api.getMenuList(this.queryForm)
        this.menuList = list
      } catch (error) {
        throw new Error(error)
      }
    },
    // 新增
    handeAdd (type, row) {
      this.showDialog = true
      this.action = 'add'
      if (type == 2) {
        // 渲染父级
        this.menuForm.parentId = [...row.parentId, row._id].filter(item => item)
      }
    },
    // 编辑
    handeEdit (row) {
      this.showDialog = true
      this.action = 'edit'
      this.$nextTick(() => {
        Object.assign(this.menuForm, row)
      })
    },
    // 删除
    async handleDelete (_id) {
      try {
        await this.$api.menuSubmit({ _id, action: 'delete' })
        this.$message.success('删除成功')
      } catch (error) {
        throw new Error(error)
      }
    },
    // 取消
    handeClose (form) {
      this.resetForm(form)
      this.showDialog = false
    },
    // 提交
    handeSubmit () {
      this.$refs.menuForm.validate(async (valid) => {
        if (valid) {
          let { action, menuForm } = this;
          let params = { ...menuForm, action }
          try {
            await this.$api.menuSubmit(params)
            this.handeClose('menuForm')
            this.$message.success('添加成功')
            this.initMenuList()
          } catch (error) {
            throw new Error(error)
          }
        } else {
          return valid
        }
      })

    }
  },
  mounted () {
    this.initMenuList()
  }
}
</script>

<style lang="scss" scoped>
.user__wrapper {
  background: #fff;
}
.user__top {
  height: 0.8rem;
  padding: 0.24rem;
  border-bottom: 0.01rem solid #ebeef1;
}
.user__bottom {
  background: #ebeef1;
  padding-top: 0.3rem;
  .active {
    background: #fff;
    padding: 0.27rem;
  }
  .pages {
    text-align: right;
    padding: 0.1rem 0.27rem;
    background: #fff;
  }
}
</style>